import React, { useLayoutEffect, useMemo, useState } from 'react';
import { Alert, Tabs } from 'antd';
import { PageContainer } from '@/molecules';
import { withRouter, router } from 'umi';
import EmployeeCard from '@/pages/EntryManage/components/EmployeeCard';
import authHelper from '@/utils/auth/helper';
import { sameTabProps } from '@/utils/tab';
import EmployeeArchives from '../components/EmployeeArchives';
import EntryMaterialTabContent from './components/EntryMaterialTabContent';
import EntryRecordTabContent from './components/EntryRecordTabContent';
import styles from './index.less';

/**
 * 入职员工详情
 * /office/personnelManagement/onboardAndLeave/entryManage/entryEmployeeDetail
 */
const EntryEmployeeDetail = ({ location }) => {
    const [pageError, setPageError] = useState();
    const { entryPersonnelCode, tab } = location.query;
    const tabAuthMap = {
        archives: authHelper.checkCode('office:personnel:progress:entry:detail:get'),
        material: authHelper.checkCode('office:personnel:progress:entry:detail:material'),
        record: authHelper.checkCode('office:personnel:progress:entry:detail:record')
    };
    // 默认选项卡
    const activeKey = useMemo(() => {
        const hasAuthTab = Object.keys(tabAuthMap).filter(item => tabAuthMap[item]);
        if (tab && hasAuthTab.includes(tab)) {
            return tab;
        }
        return hasAuthTab[0];
    }, [tab, tabAuthMap]);

    useLayoutEffect(() => {
        // 参数校验
        if (!entryPersonnelCode) {
            setPageError('参数无效');
        }
    }, [entryPersonnelCode]);

    // 切换选项卡
    const handleTabChange = tabKey => {
        history.push({ pathname: location.pathname, query: { ...location.query, tab: tabKey }, ...sameTabProps });
    };

    if (pageError) {
        return (
            <PageContainer>
                <Alert message={pageError} type="error" showIcon />
            </PageContainer>
        );
    }

    // render
    return (
        <PageContainer>
            {/* 员工基础信息 */}
            <EmployeeCard
                employeeCode={entryPersonnelCode}
                location={location}
                isShowControls
                style={{ marginBottom: '20px' }}
            />
            {/* 选项卡 */}
            <Tabs type="card" activeKey={activeKey} onChange={handleTabChange}>
                {tabAuthMap.archives && (
                    <Tabs.TabPane tab={<div className={styles.tabPaneLabel}>档案</div>} key="archives">
                        <EmployeeArchives readonly employeeCode={entryPersonnelCode} />
                    </Tabs.TabPane>
                )}
                {tabAuthMap.material && (
                    <Tabs.TabPane tab={<div className={styles.tabPaneLabel}>入职材料</div>} key="material">
                        <EntryMaterialTabContent employeeCode={entryPersonnelCode} />
                    </Tabs.TabPane>
                )}
                {tabAuthMap.record && (
                    <Tabs.TabPane tab={<div className={styles.tabPaneLabel}>入职记录</div>} key="record">
                        <EntryRecordTabContent employeeCode={entryPersonnelCode} />
                    </Tabs.TabPane>
                )}
            </Tabs>
        </PageContainer>
    );
};

export default withRouter(EntryEmployeeDetail);
